Use hierarchy in mockups 在 Mockup 中應用資訊層級
層級的主要目的是：
- 引導使用者注意力：告訴他們先看哪裡、接下來做什麼。
- 組織資訊結構：從最重要到最不重要，幫助使用者快速理解內容。
- 提升可訪問性：輔助技術（如螢幕閱讀器）依賴清晰的層級結構讀取內容。
如何在 mockup 中實現層級結構？
1.從主要目標出發
- 確定頁面的主要任務是什麼（如登入、下單、填寫表單）
- 把這個主要任務的按鈕或入口放在最顯眼的位置
2. 使用字型和顏色建立視覺路徑
- 主標題：最大、最粗、對比最強
- 副標題：中等字號、較輕的字型
- 正文說明：小字號、低對比度顏色
3.合理分組資訊
- 利用空白（white space）讓資訊塊之間有呼吸感
- 相似功能/內容使用相同的格式和視覺風格進行歸類（“卡片式設計”常用於此）
4.構建一致的 heading 結構
- 使用
<h1>到<h4>的順序排布內容（哪怕你在設計工具中是用圖層）
- 這不僅幫助使用者掃描資訊，還能讓螢幕閱讀器正確讀取頁面內容順序
案例分析：Google Opinion Rewards App
| 壞設計（無層級） | 好設計（有層級） |
|---|---|
| 字型大小一致 | 獎勵資訊使用加粗大字型 |
| 無明確視覺焦點 | 使用顏色和大小吸引注意力 |
| 資訊平鋪且混亂 | 資訊有明顯分組，操作路徑清晰 |
Google 搜尋結果頁面，同時顯示了一個 螢幕閱讀器（Screen Reader） 正在讀取頁面標題（Headings）的介面。
螢幕閱讀器檢測到了頁面中的多個標題，並按照層級結構（如標題1、標題2、標題3）列出：
- Heading 1：Search Results（搜尋結果）
- Heading 2：Local Results（本地結果）
- Heading 3：PUPPIES FOR HOMES（可領養小狗）
這些標題幫助使用螢幕閱讀器的使用者快速瞭解頁面的結構，並跳轉到感興趣的部分。
在設計介面時，良好的視覺層級結構（Visual Hierarchy）不僅對一般使用者很重要，對依賴輔助技術的使用者尤其關鍵。
以下幾點說明了原因：
- 結構清晰：正確使用標題層級（如 H1、H2、H3）可以讓螢幕閱讀器按正確順序朗讀內容，幫助使用者建立頁面的邏輯結構。
- 避免混亂：如果標題順序混亂（比如直接從 H1 跳到 H4），螢幕閱讀器使用者可能會不知道當前在哪個內容部分。
- 提升可訪問性：良好的層級結構支援資訊架構（Information Architecture），幫助所有使用者，尤其是視覺障礙使用者，更輕鬆地理解和使用產品。